{% extends 'baykeshop/base_site.html' %}

{% load i18n static bayketags %}

{% block title %}收银台{% endblock %}

{% block breadcrumb %}
<div class="container">
	<nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
		<ul>
			<li><a href="{% url 'baykeshop:home' %}">首页</a></li>
			<li class="is-active"><a href="#" aria-current="page">订单支付</a></li>
		</ul>
	</nav>
</div>
{% endblock %}

{% block container %}

<div class="box is-marginless is-radiusless has-background-primary-dark has-text-white-bis">
    <h1 class="is-size-3">订单提交成功！去付款咯~</h1>
    <p>剩余时间：01小时49分钟24秒</p>
</div>
<div class="box is-radiusless" style="line-height: 30px;">
    <p>订单编号：{{ order_sn }}</p> 
    <p>订单总额：{{ total_amount }}元</p>
    <p>收货信息：{{ address }}</p>
</div>

<div class="box is-radiusless">
    <h1 class=" is-size-4">订单商品</h1>
    <div class="dropdown-divider"></div>
    {% for sku in baykeordersku_set %}

    <div class="columns">
        <div class="column is-2 is-flex is-justify-content-center">
            <figure class="image is-128x128">
                <img src="{{ sku.skus.pic }}" alt="{{ sku.title }}">
            </figure>
        </div>
        <div class="column is-flex is-flex-direction-column is-justify-content-center">
            <h1 class=" has-text-weight-bold">{{ sku.title }}</h1>
            <div class="has-text-grey-light">
                {% for op in sku.options %}
                <span class="mr-3">{{ op.spec__name }}:{{ op.name }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
            {{ sku.price }}x{{ sku.count }}
        </div>
        <!-- <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
            ¥{{ sku.totalPrice }}
        </div> -->
    </div>
    <div class="dropdown-divider"></div>
    {% endfor %}
</div>

<div class="box is-radiusless">
    <h1 class=" is-size-4">支付方式</h1>
    <div class="dropdown-divider"></div>
    {% include 'baykeshop/comp/paymethods.html' with methods=paymethods %}
    <div class="dropdown-divider"></div>
    <div class="has-text-right" id="nowPay">
        <button class="button is-danger is-large pl-6 pr-6" @click="savePay">立即支付</button>
    </div>
</div>
{% endblock %}

{% block vue %}
    <script>
        var nowPay = new Vue({
            el: '#nowPay',
            delimiters: ['{$', '$}'],
            data:{},
            methods: {
                savePay(){
                    request({
                        url: '{{ payapi }}',
                        method: 'post',
                        data: {
                            method: payMethod._data.defaultPay.value
                        }
                    }).then(res => {
                        if (res.data.method == 2){
                            bayke.toastMessage('is-success', '正在跳转支付宝收款...')
                            location.href = res.data.alipayapi
                        }else if (payMethod._data.defaultPay.value == 4 && res.data.pay_method == 4){
                            bayke.toastMessage('is-success', '支付成功，正在跳转...')
                            setTimeout(() => {
                                location.href = "{% url 'baykeshop:menmber-orders-retrieve' id %}"
                            }, 2000);
                        }
                    })

                }
            },
        })

    </script>    


{% endblock %}
    